<template>
  <div class="container">
    <div class="code">
      <p>错误 404</p>
    </div>
    <div class="road">
      <div class="shadow">
        <div class="shelt">
          <div class="head" :style="headStyle">
            <div class="eyes">
              <div class="lefteye" :style="eyeStyle('left')">
                <div class="eyeball"></div>
                <div class="eyebrow" :style="eyebrowStyle('left')"></div>
              </div>
              <div class="righteye" :style="eyeStyle('right')">
                <div class="eyeball"></div>
                <div class="eyebrow" :style="eyebrowStyle('right')"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="hat" :style="hatStyle"></div>
        <div class="bubble">
          <RouterLink to="/login">
            <a>返回主页?</a>
          </RouterLink>
        </div>
      </div>
      <p>页面找不到了</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const parallel = ref(17)
const headHeight = ref(150)
const opacity = ref(0)
const eyeBrowHeightLeft = ref(0)
const eyeBrowHeightRight = ref(0)
// const step = ref(1)
let timer_show
let timer_eyebrow

const headStyle = ref({ top: `${headHeight.value}px` })
const eyeStyle = () => ({ width: '38px', height: '38px', borderRadius: '50%' })
const eyebrowStyle = (side) => ({
  clip: `rect(0px 38px ${(side === 'left' ? eyeBrowHeightLeft : eyeBrowHeightRight).value}px 0px)`,
  width: '38px',
  height: '19px',
  borderRadius: '19px 19px 0 0',
  backgroundColor: '#4c5465',
})
const hatStyle = ref({ transform: `rotate(${parallel.value}deg)` })

const mouseMove = () => {
  // 眼球转动逻辑可以在这里实现
}

const startAnimation = () => {
  timer_show = setInterval(rotateCounterclockwise, 55)
  setTimeout(() => {
    clearInterval(timer_eyebrow)
    timer_show = setInterval(rotateClockwise, 55)
  }, 6000)
}

const rotateCounterclockwise = () => {
  parallel.value -= 0.3
  headHeight.value -= 2.5
  opacity.value = (17 - parallel.value) / 17
  if (parallel.value > 0) {
    headStyle.value.top = `${headHeight.value}px`
    hatStyle.value.transform = `rotate(${parallel.value}deg)`
    document.querySelector('.bubble').style.opacity = opacity.value
  } else {
    clearInterval(timer_show)
  }
}

const rotateClockwise = () => {
  parallel.value += 0.3
  headHeight.value += 2.5
  opacity.value = (17 - parallel.value) / 17
  if (parallel.value <= 17) {
    headStyle.value.top = `${headHeight.value}px`
    hatStyle.value.transform = `rotate(${parallel.value}deg)`
    document.querySelector('.bubble').style.opacity = opacity.value
  } else {
    clearInterval(timer_show)
    startAnimation()
  }
}

onMounted(() => {
  window.document.onmousemove = mouseMove
  startAnimation()
})

onUnmounted(() => {
  clearInterval(timer_show)
  clearInterval(timer_eyebrow)
  window.document.onmousemove = null
})
</script>

<style scoped>
/* 样式部分保持不变，但为了完整性，这里仍然列出 */
body,
div,
p,
a {
  margin: 0px;
  padding: 0px;
}

p {
  text-decoration: none;
  user-select: none;
}

html,
body {
  width: calc(80vw - 220px);
  height: calc(80vh - 100px);
}

body {
  background: linear-gradient(#c7c8cf, #e8e8e9, #c7c8cf);
  overflow: hidden;
}

.code {
  display: block;
  width: 100%;
  height: 120px;
  line-height: 120px;
  /* background-color: #ff8c00; */
}

.code p {
  height: inherit;
  line-height: inherit;
  text-align: center;
  font-family: BalboaWide Bold;
  font-size: 50px;
  color: #697a8a;
  opacity: 1;
}

.road {
  width: 100%;
  height: 100px;
  /* background-color: red; */
}

.road .shadow {
  position: relative;
  margin: auto;
  margin-top: 25%;
  width: 330px;
  height: 70px;
  border: 0px;
  background: linear-gradient(#777373, #3c3c3c);
  box-shadow:
    0px 3px 10px 2px #464646,
    0px -3px 10px 2px #3a3939 inset;
  border-radius: 100%;
}

.road p {
  display: block;
  margin-top: 50px;
  height: inherit;
  line-height: inherit;
  text-align: center;
  font-family: BalboaWide Bold;
  font-size: 30px;
  color: #697a8a;
  opacity: 1;
}
.road .shadow .bubble {
  display: block;
  position: absolute;
  top: -180px;
  left: 350px;
  width: 246px;
  height: 179px;
  background-image: url(../../assets/404img/bubble.png);
  background-repeat: no-repeat;
  text-align: center;
}

.road .shadow .bubble a {
  line-height: 140px;
  font-family: 'microsoft yahei';
  font-size: 1.5em;
  color: #f8f8f5;
  letter-spacing: 1px;
  text-decoration: none;
  transition: 1s;
  user-select: none;
}

.road .shadow .bubble a:hover {
  color: #ff8c00;
}

.road .shadow .shelt {
  position: absolute;
  margin: auto;
  margin-top: -80px;
  width: 330px;
  height: 150px;
  border: 0px;
  border-radius: 100%;
  overflow: hidden;
  background: transparent;
}
.road .shadow .head {
  position: absolute;
  left: 50%;
  margin-left: -60px;
  top: 150px;
  width: 120px;
  height: 300px;
  border: 0px;
  border-radius: 100% 100% 0 0;
  background-color: #292d38;
}

.road .shadow .head .eyes {
  width: 100%;
  height: 50px;
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.road .shadow .head .eyes .lefteye,
.road .shadow .head .eyes .righteye {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background-color: #f1f2f4;
}

.road .shadow .head .eyes .lefteye .eyebrow {
  position: absolute;
  width: 38px;
  left: 0px;
  top: 0px;
  height: 19px;
  border-radius: 19px 19px 0 0;
  background-color: #4c5465;
  clip: rect(0px 38px 0px 0px);
}

.road .shadow .head .eyes .righteye .eyebrow {
  position: absolute;
  width: 38px;
  left: 0px;
  top: 0px;
  height: 19px;
  border-radius: 19px 19px 0 0;
  background-color: #4c5465;
  clip: rect(0px 38px 0px 0px);
}

.road .shadow .head .eyes .lefteye .eyeball {
  position: absolute;
  width: 10px;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  height: 10px;
  border-radius: 100%;
  background-color: #292d38;
}

.road .shadow .head .eyes .righteye .eyeball {
  position: absolute;
  width: 10px;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  height: 10px;
  border-radius: 100%;
  background-color: #292d38;
}

.road .shadow .hat {
  position: absolute;
  top: -297px;
  left: -8px;
  width: 330px;
  height: 330px;
  background: url(../../assets/404img/sign.png) no-repeat;
  transform-origin: left bottom;
  transform: rotate(17deg);
}
</style>
